<script>
import ErpPackageTeamList from './packageteam/ErpPackageTeamList.vue'
import ErpPackageExecutionOrganizationList from './packageexecutionorganization/ErpPackageExecutionOrganizationList.vue'
import ErpPackageMemberList from './packagemember/ErpPackageMemberList.vue'
import ErpPackageGroupList from './packagegroup/ErpPackageGroupList.vue'

export default {
  name: 'ErpPackageList',
  components: { ErpPackageTeamList, ErpPackageExecutionOrganizationList, ErpPackageMemberList, ErpPackageGroupList },
  data() {
    return {
      organizationCode: '',
      teamId: '',
      groupId: '',
      groupType: ''
    }
  },
  methods: {
    onOrganizationSelectChange({ organizationCode }) {
      this.organizationCode = organizationCode
      this.teamId = ''
      this.groupId = ''
    },
    onTeamSelectChange({ teamId }) {
      this.teamId = teamId
      this.groupId = ''
    },
    onGroupSelectChange({ groupId, groupType }) {
      this.groupId = groupId
      this.groupType = groupType
    }
  }
}
</script>

<template>
  <a-row :gutter="10">
    <a-col :md="6" :sm="24">
      <a-card :bordered="false" title="包装执行组织">
        <erp-package-execution-organization-list @selection-change="onOrganizationSelectChange" />
      </a-card>
    </a-col>
    <a-col :md="6" :sm="24">
      <a-card :bordered="false" title="包装班组">
        <erp-package-team-list @selection-change="onTeamSelectChange" :organizationCode="organizationCode" />
      </a-card>
    </a-col>
    <a-col :md="6" :sm="24">
      <a-card :bordered="false" title="包装小组">
        <erp-package-group-list @selection-change="onGroupSelectChange" :teamId="teamId" />
      </a-card>
    </a-col>
    <a-col :md="6" :sm="24">
      <a-card :bordered="false" title="小组成员">
        <erp-package-member-list :groupId="groupId" :groupType="groupType"/>
      </a-card>
    </a-col>
  </a-row>
</template>

<style scoped>

</style>